<template>
	<view class="flex-col page">
		<u-navbar :title="title" :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>

		<image class="shrink-0 image" :src="$util.img(item.image)" mode="aspectFit" />
		<view class="flex-col group">
			<view class="flex-col section_2">
				<view class="flex-row justify-between self-stretch">
					<view class="flex-row self-start">
						<view class="shrink-0 section_3"></view>
						<text class="font text ml-9">{{item.name}}</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" @click="gz"
						v-if="item.is_collect == 0">
						<text class="font_2 text text_2">关注</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" @click="qxgz"
						v-if="item.is_collect == 1">
						<text class="font_2 text text_2">取消关注</text>
					</view>
				</view>
				<view class="flex-row items-baseline self-stretch group_2">
					<text class="font_2 text">批发价：</text>
					<text class="font_3 text ml-1-5" v-if="item.pf_price == 0">暂无</text>
					<text class="font_3 text ml-1-5" v-else>￥{{item.pf_price}}</text>
				</view>
				<view class="flex-row justify-between equal-division group_3">
					<view class="flex-row items-baseline">
						<text class="font_2 text">行情价：</text>
						<text class="font_3 text ml-1-5" v-if="item.hq_price == 0">暂无</text>
						<text class="font_3 text ml-1-5" v-else>￥{{item.hq_price}}</text>
					</view>
					<view class="flex-row items-baseline">
						<text class="font_2 text">指导价：</text>
						<text class="font_3 text text_3 ml-1-5" v-if="item.zd_price == 0">暂无</text>
						<text class="font_3 text text_3 ml-1-5" v-else>￥{{item.zd_price}}</text>
					</view>
				</view>
			</view>
			<view class="mt-8 flex-col section_2">
				<view class="flex-row justify-between items-center">
					<view class="flex-row">
						<view class="shrink-0 section_3"></view>
						<text class="font_4 text ml-9-5">历史行情</text>
					</view>
					<view class="flex-row">
						<view class="flex-col justify-start items-center"
							:class="date_type == 1 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(1)">
							7天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 2 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(2)">
							30天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 3 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(3)">
							90天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 4 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(4)">
							180天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 5 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(5)">
							1年
						</view>
					</view>
				</view>
				<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas"
					:ec="ec"></uni-ec-canvas>
			</view>
			<view class="mt-8 flex-col section_4">
				<view class="flex-row group_4">
					<view class="section_3"></view>
					<text class="font_4 text text_9 ml-9-5">每日行情</text>
				</view>
				<view class="flex-row items-center group_5">
					<text class="font_6 text text_10">日期</text>
					<text class="font_6 text text_11">当日价格</text>
					<text class="font_6 text text_12">涨跌幅</text>
				</view>


				<view class="flex-row items-center group_5" v-for="(items, index) in list">
					<text class="font_7 text_10">{{items.date}}</text>
					<text class="font_8 text_11" v-if="items.type == 1">{{items.price}}</text>
					<text class="font_9 text_11" v-if="items.type == 2">{{items.price}}</text>
					<view class="flex-row items-center text_12">
						<image class="shrink-0 image_3" v-if="items.type == 1"
							src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
						<image class="shrink-0 image_4" v-if="items.type == 2"
							src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
						<text class="font_8 text" v-if="items.type == 1">{{items.fd}}</text>
						<text class="font_9 text" v-if="items.type == 2">{{items.fd}}</text>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null

	export default {
		components: {
			uniEcCanvas
		},
		props: {},
		data() {
			return {
				id: '',
				title: '',
				userInfo: [],
				item: {},
				date_type: 1,
				dates: ['2025.02.01', '2025.02.02', '2025.02.03'],
				datas: ['11', '12', '13'],
				list: [],
				ec: {
					lazyLoad: true
				},
				option: {
					title: {
						text: ''
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						},
					},
					grid: {
						top: '15',
						left: "10",
						right: "25",
						bottom: "10",
						show: false,
						containLabel: true,
					},
					xAxis: {
						type: "category",
						data: this.dates,
						axisTick: {
							alignWithLabel: true,
						},
						axisLabel: {
							rotate: 0,
							textStyle: {
								color: '#999999'
							}
						},
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#e1e1e1'
							}
						},
						boundaryGap: false,
					},
					yAxis: {
						axisLabel: {
							rotate: 0,
							textStyle: {
								color: '#999999'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#e1e1e1'
							}
						},
						splitLine: {
							show: false
						}

					},
					series: [{
						name: '烟价',
						type: 'line',
						areaStyle: {

						},
						itemStyle: {
							normal: {
								color: '#00806b70',
							},
						},
						symbol: 'none', //去掉折线图中的节点
						smooth: true, //true 为平滑曲线，false为直线
						data: this.datas,
					}]
				}

			};
		},
		onLoad(options) {
			this.id = options.id;
			this.title = options.title;
			this.userInfo = uni.getStorageSync('userInfo');
			this.getInfo();

		},
		onUnload() {
			chart = null
		},
		methods: {
			gz() {
				this.$api.sendRequest({
					url: '/api/index/collect',
					data: {
						id: this.id,
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							this.item.is_collect = 1;
							this.$util.showToast({
								title: '关注成功'
							});
						} else {
							this.$util.showToast({
								title: '操作失败，请重试'
							});
						}
					}
				});
			},
			qxgz() {
				this.$api.sendRequest({
					url: '/api/index/uncollect',
					data: {
						id: this.id,
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							this.item.is_collect = 0;
							this.$util.showToast({
								title: '取消成功'
							});
						} else {
							this.$util.showToast({
								title: '操作失败，请重试'
							});
						}
					}
				});
			},
			initChart(canvas, width, height, canvasDpr) {
				console.log(canvas, width, height, canvasDpr)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				return chart
			},
			dateChange(type) {
				uni.showLoading({
					title: '加载中'
				})
				this.date_type = type;
				this.getInfo();
				uni.hideLoading();
			},
			getInfo() {
				this.$api.sendRequest({
					url: '/api/index/getYanInfo',
					data: {
						id: this.id,
						type: this.date_type
					},
					success: res => {
						console.log(res.data)
						if (res.code == 1) {
							this.item = res.data;
							this.list = res.data.list;
							this.dates = res.data.date;
							this.datas = res.data.data;
							this.option = {
								title: {
									text: ''
								},
								tooltip: {
									trigger: "axis",
									axisPointer: {
										type: 'cross',
										label: {
											backgroundColor: '#6a7985'
										}
									},
								},
								grid: {
									top: '15',
									left: "20",
									right: "30",
									bottom: "10",
									show: false,
									containLabel: true,
								},
								xAxis: {
									type: "category",
									data: this.dates,
									axisTick: {
										alignWithLabel: true,
									},
									axisLabel: {
										rotate: 0,
										textStyle: {
											color: '#999999'
										}
									},
									axisLine: {
										lineStyle: {
											type: 'dashed',
											color: '#e1e1e1'
										}
									},
									boundaryGap: false,
								},
								yAxis: {
									axisLabel: {
										rotate: 0,
										textStyle: {
											color: '#999999'
										}
									},
									axisTick: {
										show: false
									},
									axisLine: {
										lineStyle: {
											type: 'dashed',
											color: '#e1e1e1'
										}
									},
									splitLine: {
										show: false
									}

								},
								series: [{
									name: '烟价',
									type: 'line',
									areaStyle: {

									},
									itemStyle: {
										normal: {
											color: '#00806b70',
										},
									},
									symbol: 'none', //去掉折线图中的节点
									smooth: true, //true 为平滑曲线，false为直线
									data: this.datas,
								}]
							}

							this.$refs.canvas.init(this.initChart)
						}
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.uni-ec-canvas {
		width: 100%;
		height: 400rpx;
	}

	.ml-10-5 {
		margin-left: 21rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-1-5 {
		margin-left: 3rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		background-color: #f5f5f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.section {
			padding: 34rpx 0 10rpx;
			background-color: #ffffff;

			.text-wrapper {
				margin-left: 32rpx;
				margin-right: 10rpx;
				padding: 96rpx 0 17rpx;
				background-image: url('https://www.dlxx.top/static/images/05e0093ead41b70437e3214e578e2e5a.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.image {
			margin-top: 12rpx;
			width: 750rpx;
			height: 400rpx;
		}

		.group {
			margin-top: 16rpx;
			padding: 0 10rpx;

			.section_2 {
				padding: 32rpx 24rpx;
				background-color: #ffffff;
				border-radius: 10rpx;

				.text-wrapper_2 {
					padding: 12rpx 0;
					background-color: #00806b;
					border-radius: 24rpx;
					width: 128rpx;
					height: 48rpx;

					.text_2 {
						color: #ffffff;
					}
				}

				.group_2 {
					margin-top: 16rpx;
					padding: 0 25rpx;
				}

				.font_2 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 23rpx;
					color: #999999;
				}

				.equal-division {
					align-self: flex-start;
					margin-left: 24rpx;
					margin-top: 38rpx;

					.text_3 {
						color: #b01431;
					}
				}

				.group_3 {
					width: 538rpx;
				}

				.font_3 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 26rpx;
					color: #011613;
				}

				.text-wrapper_3 {
					background-color: #00806b;
					border-radius: 8rpx;
					width: 60rpx;
					height: 36rpx;
					border: solid 1rpx #eeeeee;
					line-height: 34rpx;
					font-size: 20rpx;
					color: #ffffff;
				}

				.text-wrapper_4 {
					background-color: #eeeeee;
					border-radius: 8rpx;
					width: 60rpx;
					height: 36rpx;
					border: solid 1rpx #eeeeee;
					line-height: 34rpx;
					font-size: 20rpx;
					color: #333333;
				}

				.font_5 {
					font-size: 20rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #011613;
				}

				.image_2 {
					margin-left: 24rpx;
					margin-right: 15rpx;
					width: 644rpx;
					height: 287rpx;
				}
			}

			.section_4 {
				padding: 32rpx 20rpx 45rpx 24rpx;
				background-color: #ffffff;
				border-radius: 10rpx 10rpx 0 0;

				.group_5 {
					padding: 28rpx 0 20rpx;
					border-bottom: solid 2rpx #eeeeee;

					.font_6 {
						font-size: 22rpx;
						font-family: PingFangSC;
						line-height: 22rpx;
						color: #999999;
					}

					.text_10 {
						width: 50%;
					}

					.text_11 {
						width: 25%;
					}

					.text_12 {
						width: 25%;
					}

					.font_8 {
						font-size: 24rpx;
						font-family: PingFangSC;
						line-height: 24rpx;
						color: #00806b;
					}

					.image_3 {
						width: 9rpx;
						height: 22rpx;
						margin-right: 7rpx;
					}

					.image_4 {
						width: 9rpx;
						height: 21rpx;
						margin-right: 10rpx;
					}
				}


				.font_7 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #011613;
				}

				.group_7 {
					padding: 28rpx 2rpx 20rpx;
					border-top: solid 3rpx #eeeeee;

					.pos_7 {
						position: absolute;
						left: 2rpx;
						bottom: 20rpx;
					}

					.pos_8 {
						position: absolute;
						right: 0;
						bottom: 19rpx;
					}
				}

				.font_9 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 24rpx;
					color: #b01431;
				}



				.group_8 {
					padding: 28rpx 2rpx 22rpx;
					border-top: solid 3rpx #eeeeee;

					.pos_11 {
						position: absolute;
						left: 2rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					.pos_12 {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

			.section_3 {
				background-color: #00806b;
				width: 6rpx;
				height: 24rpx;
			}

			.font_4 {
				font-size: 28rpx;
				font-family: PingFangSC;
				line-height: 26rpx;
				color: #011613;
			}
		}

		.font {
			font-size: 28rpx;
			font-family: PingFangSC;
			line-height: 28rpx;
			color: #011613;
		}

		.text {
			text-transform: uppercase;
		}
	}
</style>